<template>
	<div class="container">
		<el-form ref="form" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm"
			hide-required-asterisk>
			<h2>悟空到家 - 后台登录</h2>
			<el-form-item label="账号" prop='username'>
				<el-input prefix-icon='el-icon-user' v-model="formData.username" placeholder='请输入用户名'></el-input>
			</el-form-item>
			<el-form-item label="密码" prop='password'>
				<el-input prefix-icon='el-icon-lock' type="password" v-model="formData.password"
					placeholder='请输入用户密码'></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">登录</el-button>
				<el-button @click="resetForm">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: '长度在 2 到 20 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '长度至少 2 个字符',
							trigger: 'blur'
						}
					]
				},
			}
		},

		methods: {
			submit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						// this.$message.error('请输入正确的账号和密码')
						this.$http.post('http://43.143.190.87:8182/login?username=' + this.formData.username +
								'&pwd=' + this.formData.password)
							.then(res => {
								if (res.data.code == 1) {
									this.$message.success("登录成功")
									this.$router.push('/main')
								} else {
									this.$message.error('账号或密码有误')
								}
							})
							.catch(error => {
								this.$message.error('服务器异常')
							})
					} else {
						this.$message.error('请输入正确的账号和密码')
						return false;
					}
				});
			},
			resetForm() {
				// console.log('zhixing')
				this.$refs['form'].resetFields();
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background-color: aqua;
		background-image: url(../assets/login_bg.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.el-form {
		width: 480px;
		height: 300px;
		background-color: aliceblue;
		margin: 200px auto;
		padding: 30px 50px;
		border-radius: 10px;
	}

	h2 {
		text-align: center;
		color: gold;
	}
</style>